/* 加载一个字体 */

@import url("https://fonts.googleapis.com/css2?family=Titan+One&display=swap");

/* 基础样式 */

:root {
    --background-color: #2c3e50;
    --border-color: #7591AD;
    --text-color: #34495e;
    --color1: #EC3E27;
    --color2: #fd79a8;
    --color3: #0984e3;
    --color4: #00b894;
    --color5: #fdcb6e;
    --color6: #e056fd;
    --color7: #F97F51;
    --color8: #BDC581;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}

.channel {
    position: absolute;
    width: 80%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -200px);
    font-size: 30px;
    font-weight: bold;
    color: #fff;
}

/*To*/

h1 {
    position: relative;
    font-size: 100px;
    color: #544E58;
    /* 默认状态为透明度0，不显示 */
    opacity: 0;
    /* 增加动画，显示名字 */
    /* 动画名称show_name */
    /* 持续2秒 */
    /* 线性开始结束放慢 */
    /* 延迟0.5秒 */
    /* 执行1次 */
    /* 结束时停在最后一帧 */
    /* 统一使用show动画 */
    animation: show 2s ease-in-out 0.5s 1 forwards;
}

/* 创建动画透明度从开始0到结束1  */

@keyframes show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

h1::before {
    position: absolute;
    /* 这里必须是Unicode编码 */
    /* 注意：转换完毕去掉\后面的U */

    /*编译中梦见未来*/
    /*content: '\7f16\8bd1\4e2d\68a6\89c1\672a\6765';*/
    /*\u4e01\u82b3  丁芳*/
    content: '\4e01\82b3';

    /* 颜色改为透明让背景色显示出来 */
    color: transparent;
    /* 使用linear-gradient函数生成一个渐变“图片”做背景 */
    /* 渐变颜色随便个人喜好 */
    background-image: linear-gradient(to right, #bed742, #f8aba6, #585eaa, #ed1941, #7fb80e, #f26522, #ffc20e, #7c8577, #009ad6, #65c294, #f47920, #f15b6c, #2e3a1f);
    /* 这个谷歌浏览器不起作用 */
    background-clip: text;
    /* 谷歌浏览器适配 */
    -webkit-background-clip: text;
    /* 制作一个斜矩形遮罩 */
    /* 使用polygon方法 */
    /* 矩形需要定义四个角的坐标，顺时针方向定义 */
    /* 分别为左上、右上、右下、左下 */
    /* 位置以百分比为单位 */
    /* 因为要做动画，所有先将遮罩层移除当前可视区域 */
    clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%);
    /* 增加动画 */
    /* 动画名称light */
    /* 持续时间2秒 */
    /* 延迟0秒执行 */
    /* 直接方式循环 */
    /* 延迟2秒执行等待显示 */
    animation: light 2s 2s infinite;
}

/* 初始与结束保持一致 */

/* 中间为最右侧 */

@keyframes light {
    0% {
        clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%);
    }
    50% {
        clip-path: polygon(100% 0%, 120% 0%, 110% 100%, 90% 100%);
    }
    100% {
        clip-path: polygon(-20% 0%, 0% 0%, -10% 100%, -30% 100%);
    }
}
/**/
/* 核心样式 */

.container {
    width: 100vw;
    text-align: center;
    /* 预先加载的字体 */
    font-family: "Titan One";
    color: var(--text-color);
    font-size: 80px;
}

.container span {
    -webkit-text-stroke: 2.25px #fff;
    display: inline-block;
    animation: animate 4s ease-in-out infinite both;
    animation-delay: calc(var(--i) * 120ms);
}

@keyframes animate {
    0% {
        text-shadow: 0 0px var(--color1), 0 0px var(--color2);
        transform: translateY(150%) rotate(4deg);
    }
    33.3% {
        text-shadow: 0 80px var(--color3), 0 150px var(--color4);
    }
    50% {
        text-shadow: 0 0px var(--color5), 0 0px var(--color6);
        transform: translateY(0) rotate(0deg);
    }
    66.6% {
        text-shadow: 0 -80px var(--color7), 0 -150px var(--color8);
    }
    100% {
        text-shadow: 0 0px var(--color1), 0 0px var(--color2);
        transform: translateY(150%) rotate(4deg);
    }
}